import styled from "styled-components";

export const Wrapper = styled.div`
  height: 100%;
  position: relative;

  .talks-controller {
    height: 32px;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }

  .talk-list {
    height: calc(100% - 53px - 200px);
    overflow: auto;
    border-bottom: 1px solid hsl(var(--border));

    .xhs-emoji {
      display: inline-block;
      width: 1rem;
      height: 1rem;
    }

    .card-container {
      padding: 10px;

      > * {
        margin-bottom: 20px;
        padding-right: 10px;
      }
    }

    > .ant-tabs {
      height: 100%;
      margin: 0;

      .ant-tabs-ink-bar {
        width: calc(100% - 2px);
        background: whitesmoke;
        z-index: -1;
        border-radius: 8px 0 0 8px;
        right: 1px;
        border-width: 1px 0 1px 1px;
        border-color: lightgrey;
      }

      .ant-tabs-nav {
        min-width: auto;
        padding-top: 6px;
      }

      .ant-tabs-tab {
        padding: 4px;
        writing-mode: vertical-lr;
      }

      .ant-tabs-content {
        height: 100%;
        overflow: auto;

        .ant-tabs-tabpane {
        }
      }
    }
  }
`;
